<script setup lang="jsx">
import { ref } from 'vue'
import formComponent from '../lib/component/formComponent.vue';
import tableList from './components/tableList.vue';
import { ElOption, ElSwitch } from 'element-plus'
let searchFormData = ref({
  gender: '0',
  name: '前端开发大佬',
  hobby: "追剧,cityWalk,旅行，摄影",
  isLeave: true
});
let formJSON = ref([
  {
    type: 'input',
    label: "姓名",
    key: 'name',
    props: {
      style: {
        width: '100%'
      }
    },
    colProps: {
      xs: 24,
      sm: 12,
      md: 8,
      lg: 6
    }
  },
  {
    type: 'select',
    label: "性别",
    key: 'gender',
    props: {
      style: {
        width: '100%'
      }
    },
    slots: {
      default: () => {
        return (
          <><ElOption label="男" value="0"></ElOption><ElOption label="女" value="1"></ElOption></>
        )
      }
    },
    colProps: {
      xs: 24,
      sm: 12,
      md: 8,
      lg: 6
    }
  },

  {
    type: 'switch',
    label: '是否离职',
    key: 'isLeave',
    colProps: {
      span: 3
    }
  },
  {
    type: "input",
    label: "兴趣/爱好",
    key: "hobby",
    props: {
      type: "textarea",
      row: 1,
      placeholder: "输入你的爱好"
    },
    colProps: {
      xs: 24,
      sm: 12,
      md: 8,
      lg: 6
    }
  },
])

let tableColumns = [
  {
    label: "姓名",
    prop: "name"
  },
  {
    label: "性别",
    prop: "gender"
  },
  {
    label: "爱好",
    prop: "hobby"
  },
  {
    label: "是否离职",
    prop: "isLeave",
    slots: {
      default: (h, data) => {
        return (
          <ElSwitch v-model={data.isLeave} />
        )
      }
    }
  }
]

let tableSource = [
  {
    name: "张三",
    gender: "男",
    hobby: "追剧,cityWalk,旅行，摄影",

  },
  {
    name: "李四",
    gender: "女",
    hobby: "追剧,cityWalk,旅行，摄影",
    isLeave: false
  },
  {
    name: "王五",
    gender: "男",
    hobby: "追剧,cityWalk,旅行，摄影",
    isLeave: true
  },
  {
    name: "赵六",
    gender: "女",
    hobby: "追剧,cityWalk,旅行，摄影",
    isLeave: false
  }
]
</script>

<template>
  <div style="margin: 10px;">
    <formComponent :searchFormData="searchFormData" :formJSON="formJSON">

    </formComponent>
  </div>

  <tableList :tableColumns="tableColumns" :tableSource="tableSource" border></tableList>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
